<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		h3 {
			color: skyblue;
		}

		div {
			width: 500px;
			height: 500px;
			background-image: url(../images/logo.png);
			background-repeat: no-repeat;
			background-color: hotpink;
			/* 背景图片需要url指定路径,可以选择是否平铺repeat,还可以沿x轴repeat-x或者沿y轴repeat-y */
			/* 同时设置背景颜色的话，背景图片会压住颜色 */

			/* background-position: top; */
			background-position: 30px 30px;
			/* background-position如果跟的是精确单位，那么第一个一定是x轴，第二个一定是y轴 */
			/* 如果是一个单位那一定是x轴,第二个是默认垂直居中 */
			/* 背景位置属性background-position可以跟方位名词，两个方位没有先后顺序，省略一个，另一个默认居中 */
			/* background-position还可以用混合单位来写,这时也是第一个x，第二个是y */
			background-attachment: fixed;
			/* 这个属性用关于固定住背景图片,如果页面很多内容向下滚动时背景图片会固定住 */
		}

		#a {
			color: #464646;
			width: 118px;
			height: 41px;
			font-size: 14px;
			font-weight: 400;
			line-height: 41px;
			background-color: skyblue;
			background-image: url(../images/icon.png);
			background-repeat: no-repeat;
			background-position: left;
			text-indent: 1.5em;
		}

		h4 .b {
			width: 300px;
			height: 300px;
			background: rgba(180, 180, 0, 0.3);
		}
	</style>
</head>

<body>
	<div>

	</div>
	<br>
	<h3 id="a">
		成长守护平台
	</h3>
	<h3>背景图片最好用来做网页上一些小的装饰类图片和大的背景图片，他的优势在于可以精确调整位置而插入图片则很难调整位子</h3>

	<h2>背景图片可以采用简写方式,background: 颜色 图片地址 图片平铺 图片滚动 图片位置 实际开发中提倡简写</h2>
	<h4>
		<div class="b"></div>
	</h4>
	<h3>background: rgba(0, 0, 0, 0.5);背景设置透明的写法,其中a表示透明度</h3>


</body>

</html>